<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../three.min.js"></script>
</head>
<body>
    <script>
        const width = window.innerWidth;
        const height = window.innerHeight;

        var renderer = new THREE.WebGLRenderer()
        renderer.setSize(width,height)
        renderer.setClearColor("black",1)
        document.body.appendChild(renderer.domElement)

        var camera = new THREE.PerspectiveCamera(45,width/height,1,1000)
        camera.position.set(300,300,300)
        camera.up.set(0,1,0)
        camera.lookAt(new THREE.Vector3(0,0,0))

        var scene = new THREE.Scene()
        var geometry = new THREE.BufferGeometry()

        const vertices = new Float32Array( [
            -100,0,0,
            100,0,0,
            0,100,0,
            0,-100,0,
        ] );
        const color = new Float32Array( [
            0,1,0,
            1,0,0,
            0,0,1,
            0,1,0,
        ] );
        
        geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices,3));
        geometry.setAttribute( 'color', new THREE.BufferAttribute( color,3));
        let indexs = [
			0, 1, 2,
			0, 1, 3,
		];
        //geometry.index = new THREE.BufferAttribute(indexs, 1);
        geometry.setIndex( indexs );
        console.log(geometry)
        let mesh = new THREE.Mesh(
		geometry,
		new THREE.MeshBasicMaterial({ 
			vertexColors: THREE.VertexColors,
			side: THREE.DoubleSide 
		})
		);
	    scene.add(mesh);
    
        renderer.render(scene,camera)
        


    </script>
</body>
</html>